<template>
  <div class="video_play">
    <!--0624 -->
    可以做题的长度s{{canExerciseLength}}<br>已学的长度s{{study_length}}
    <div id="video" style="height: 100%"></div>
  </div>
</template>

<script>
// 视频播放
// 点击课程表课程，左侧加载至对应的视频及详情
// 视频下方已学时长和成绩有数据时才显示
// "视频下方的做题按钮默认灰色，视频播放总时长80%时可以点击做题按钮点亮
/*
* 计时：study_length_delta单位是秒点击播放开始计时，精确到秒
* speed_progress：当前视频播放到的秒数
* 重新进入是进度跳转到speed_progress秒处
* 暂停播放时！！上报计时，清空计时
* 再次播放重新计时，
* ----ok可以拖拽进度条，不能倍数播放，不能下载
* 切换详情！！上报计时，清空计时
* 切换页面！！上报计时，清空计时
* 固定时间，每3分钟定时！！上报计时，清空计时->countDelta===3 * 60时上报并清空
* */
const DEFAULT_REPORT = 3 * 60;// 默认上报时间

export default {
  name: 'VideoPlay',
  data() {
    return {
      player: null, // 播放器
      countDelta: 0, // 时长差
      study_length: 0, // 当前播放总时长
      timer: null, //定时器
    }
  },
  props: {
    // 学科id
    subject_id: {
      type: Number,
      default: 0
    },
    // 课程id
    curriculum_id: {
      type: Number,
      default: 0
    },
    // 视频总时长
    video_length: {
      type: Number,
      default: 0
    },
    // 做题的需要播放的时长
    canExerciseLength: {
      type: Number,
      default: 0
    },
  },
  mounted() {
    // eslint-disable-next-line new-cap,no-undef
    this.player = new ckplayer();
  },
  beforeDestroy() {
    // 切换页面：上报计时，清空计时
    console.info('changePage')
    this.reportAndReset()
  },
  methods: {
    /**
     * 切换详情：上报计时，清空计时
     * @param resize {array} 视频列表
     * @param speedProgress {number} 当前播放进度单位秒
     * @param studyLength {number} 当前播放总时长
     */
    changeDetail({resize, speedProgress, studyLength}) {
      console.info('changeDetail')
      this.reportAndReset()
      const videoList = resize.reduce((pre, cur) => [...pre, [cur.url, 'video/mp4', cur.type]], [])
      this.study_length = studyLength
      this.loadVideo(videoList, speedProgress)
    },
    /**
     * 加载新的视频
     * @param videoList {array} 视频列表
     * @param speedProgress {number} 当前播放进度单位秒，超出视频总长度时，ckplayer会自动兼容
     */
    loadVideo(videoList, speedProgress) {
      this.player.newVideo({
        container: '#video', //容器的ID
        autoplay: false, //是否自动播放
        loaded: this.loadedHandler, //当播放器加载后执行的函数
        playbackrate: -1, //默认速度的编号，只对html5有效,设置成-1则不显示倍速
        video: videoList,
        seek: speedProgress
      })
    },
    loadedHandler() {
      this.player.addListener('play', this.playHandler); //监听播放
      this.player.addListener('pause', this.pauseHandler); //监听暂停
    },
    // 点击进度条时、点击播放按钮时、切换视频清晰度时均触发
    playHandler() {
      console.info('play')
      this.startCount()
    },
    // 点击暂停按钮时：上报计时，清空计时
    pauseHandler() {
      console.info('pause')
      this.reportAndReset()
    },
    // 上报并清空
    reportAndReset() {
      console.info('reportAndReset')
      this.reportCountDelta()
      this.resetCount()
    },
    // 开始计时
    startCount() {
      console.info('startCount')
      if (this.timer !== null) return
      this.timer = setInterval(() => {
        this.countDelta++
        this.study_length++
      }, 1000)
    },
    // 重置计时
    resetCount() {
      console.info('resetCount')
      if (this.timer === null) return
      clearInterval(this.timer)
      this.timer = null
      this.countDelta = 0
    },
    // 上报播放时间
    reportCountDelta() {
      // 变化量为0时不上报
      if (this.countDelta === 0) return
      return this.$http.post('/subject/video_pay_report', {
        major_id: this.$store.state.studentInfo.major_detail.major_id,
        subject_id: this.subject_id,
        curriculum_id: this.curriculum_id,
        // study_length_delta: 0, // 时间差
        study_length_delta: this.countDelta, // 时间差
        // speed_progress: 0, // 视频当前播放到的秒数
        speed_progress: Math.floor(this.player.time), // 视频当前播放到的秒数
      })
    }
  },
  watch: {
    countDelta: {
      handler(newVal) {
        // 固定时间：上报计时，清空计时
        if (newVal === DEFAULT_REPORT) {
          console.info('DEFAULT_REPORT')
          this.reportAndReset()
        }
      }
    },
    study_length: {
      handler(newVal) {
        // 触发做题可用
        if (newVal === this.canExerciseLength) {
          console.log('ok');
          this.$emit('setCanExercise')
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .video_play {
    width: 750px;
    height: 372px;
    margin-bottom: 34px;
    background-color: #f1f1f1;
  }
</style>
